"use client";

import React from "react";
import { LayoutGridIcon, ListIcon } from "lucide-react";

import { cn } from "@dotui/registry/lib/utils";
import { SearchField } from "@dotui/registry/ui/search-field";
import { Skeleton } from "@dotui/registry/ui/skeleton";
import { ToggleButton } from "@dotui/registry/ui/toggle-button";
import { ToggleButtonGroup } from "@dotui/registry/ui/toggle-button-group";
import type { RouterOutputs } from "@dotui/api";

import { StyleCard } from "./style-card";

export function StylesList({
  styles,
  isLoading,
  search = false,
  ...props
}: React.ComponentProps<"div"> & {
  styles?: RouterOutputs["style"]["getPublicStyles"];
  isLoading?: boolean;
  search?: boolean;
}) {
  const [query, setQuery] = React.useState("");

  const filtered = (styles ?? []).filter(
    (s: {
      name: string;
      description: string | null;
      user: { username: string };
    }) => {
      const q = query.trim().toLowerCase();
      if (!q) return true;
      return (
        s.name.toLowerCase().includes(q) ||
        (s.description ?? "").toLowerCase().includes(q) ||
        s.user.username.toLowerCase().includes(q)
      );
    },
  );

  return (
    <div className={cn("@container/styles-list", props.className)}>
      <div className="flex items-center justify-end gap-4">
        {search && (
          <SearchField
            aria-label="Search styles"
            placeholder="Search styles..."
            className="flex-1"
            onChange={(value) => setQuery(value?.toString() ?? "")}
            value={query}
          />
        )}
      </div>
      <div
        className={cn(
          "grid grid-cols-1 gap-4 @3xl/styles-list:grid-cols-2 @5xl/styles-list:grid-cols-3",
          search && "mt-6",
          props.className,
        )}
      >
        {(!styles || styles.length === 0 || filtered.length === 0) &&
          !isLoading && (
            <p className="text-sm text-fg-muted">No styles found</p>
          )}
        {isLoading &&
          Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className="space-y-3">
              <Skeleton className="h-62" />
              <div className="flex items-center justify-between gap-2 px-[2px]">
                <Skeleton className="h-6 w-28" />
                <div className="flex items-center gap-2">
                  <Skeleton className="size-5" />
                  <Skeleton className="h-5 w-20" />
                </div>
              </div>
            </div>
          ))}
        {filtered.map(
          (style: RouterOutputs["style"]["getPublicStyles"][number]) => (
            <StyleCard key={style.name} style={style} />
          ),
        )}
      </div>
    </div>
  );
}
